<!-- 仪表盘 canvas -->
<template>
  <div class=''>
    <canvas id="canvas" class="canvas"></canvas>
  </div>
</template>

<script>
let canvas;
let ctx;
export default {
  props:['angle'],
  components: {},
  data() {
    return {
        
      };
  },
  watch:{
    angle(){
      this.initCanvas()
    }
  },
  mounted(){
    this.initCanvas()
  },
  methods: {
    initCanvas() {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
      this.drawSmile(this.angle)
    },
    drawSmile(angle) { //angle:角度
      let ratio = window.devicePixelRatio||2
      // 设置宽高
      let width = canvas.width = 375*ratio
      let height = canvas.height = 235*ratio;
      let innerLineNums = 50;//刻度数量
      let oneDeg = Math.PI/180

      

      let stage = ['0','差', '中', '良', '优','50']
      // 更改坐标系原点
      ctx.translate(width/2,height-174)
      ctx.rotate(Math.PI)
      ctx.scale(ratio,ratio)
      // 绘制一条灰色圆弧
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth= 15;
      ctx.strokeStyle = '#f5f6f9'
      ctx.arc(0,0,91,-35*oneDeg,215*oneDeg)
      ctx.stroke()
      ctx.restore()

      // 绘制指针
      ctx.save()
      ctx.beginPath()
      ctx.rotate(-22.5*oneDeg)
      ctx.rotate((angle/100)*225*oneDeg)
      ctx.lineWidth= 6;
      ctx.strokeStyle = '#3274f2'
      ctx.arc(0,0,10,0,2*Math.PI)
      ctx.moveTo(10,0)
      ctx.lineTo(45,0)
      ctx.lineCap = 'round'
      ctx.stroke()
      ctx.restore()

      // 绘制刻度
      ctx.save()
      let deg1 = 4.6*oneDeg
      let aNum = 180/50;
      ctx.rotate(-22.5*oneDeg)
      for (let i = 0; i < innerLineNums; i++) { 
        let nowPercentage = Math.round((i*4.6/225)*100)
        angle = Number(angle)
        // console.log(nowPercentage,angle)
        ctx.beginPath()
        ctx.lineWidth= 2.5;
        ctx.moveTo(91-7.5,0)
        if (nowPercentage<=angle||nowPercentage-1<=angle) {
          ctx.strokeStyle = '#3274f2'
        } else {
          ctx.strokeStyle = '#cdcdcd'
        }
        if (nowPercentage == angle||nowPercentage == angle) {
          ctx.lineTo(121,0)
        } else {
          ctx.lineTo(112,0)
        }
        ctx.stroke()
        ctx.rotate(deg1)
      }
      ctx.restore()
      
      // 绘制小刻度
      ctx.save()
      ctx.beginPath()
      ctx.rotate(-22.5*oneDeg)
      for (let i = 0; i < innerLineNums; i++) {
        ctx.lineWidth= 2.5;
        ctx.strokeStyle = '#cdcdcd'
        ctx.moveTo(74,0)
        ctx.lineTo(76.5,0)
        ctx.rotate(deg1)
      }
      ctx.stroke()
      ctx.restore()

      // 绘制刻度文字
      let R; //半径
      let deg2 = (180-135)/2;
      let deg3 = (360-135)/5;
      
      ctx.save()
      ctx.beginPath()
      ctx.font = "14px PingFangSC-Regular";
      
      ctx.rotate(Math.PI)
      R = 60 + 5
      ctx.fillText('差', -R*Math.cos((deg2+deg3*0)*oneDeg*1),  -R*Math.sin((deg2+deg3*0)*oneDeg*1));
      ctx.fillText('中', -85*Math.cos((deg2+deg3*1)*oneDeg),  -55*Math.sin((deg2+deg3*1)*oneDeg));
      R = 60 - 5
      ctx.fillText('良', -R*Math.cos((deg2+deg3*2)*oneDeg),  -R*Math.sin((deg2+deg3*2)*oneDeg));
      ctx.fillText('优', -R*Math.cos((deg2+deg3*3)*oneDeg),  -R*Math.sin((deg2+deg3*3)*oneDeg));
      ctx.restore()
      
      ctx.save()
      ctx.beginPath()
      ctx.font = "8px PingFangSC-Regular";
      ctx.fillStyle = '#cdcdcd'
      ctx.rotate(Math.PI)
      R = 60 + 10
      ctx.fillText('0', -R*Math.cos(22.5*oneDeg),  R*Math.sin(22.5*oneDeg));
      R = 60 + 3
      ctx.fillText('50', -R*Math.cos(202.5*oneDeg),  -R*Math.sin(202.5*oneDeg));
      ctx.restore()

      // 绘制百分比文字
      ctx.save()
      ctx.beginPath()
      ctx.rotate(Math.PI)
      ctx.font = "30px PingFangSC-Regular";
      ctx.textAlign = 'center'
      ctx.fillText(angle+'%', 0, 50);
      ctx.restore()
    }
  }
}
</script>
<style scoped>
.canvas{
  margin: 5px 0;
  width: 100vw;
  height: 235px;
  /* background: cyan; */
  box-sizing: border-box;
}
</style>